<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>账单详情</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
	</head>
	<style type="text/css">
		/*移动端1px下边线*/
		.border{ position: relative; }
		.border:after{ content: ''; display:block; position: absolute; width: 100%; left: 0px; bottom: 0px;height: 1px; background-color:  #efefef; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
		.container{height: 8rem;background: #fff;}
		.orderDetails{height:5.24rem;width: 7.1rem;margin-left: 0.2rem;padding-top: 0.25rem;}
		.item{height: 0.5rem;font-size: 0.3rem;margin-bottom: 0.25rem;}
		.item .title{color:#828282;}
		.orderButtom{font-size: 0.5rem;text-align: center;color: #0880d6;}
		.state{height: 0.84rem;font-size: 0.34rem;margin-top: -0.25rem;}
		.state img{height: 0.5rem;width: auto;margin-right: 3px;display: block;animation: rotatefresh 2s infinite}
		@keyframes rotatefresh {
            from { transform: rotate(0deg) }
            to {
                transform: rotate(360deg);
            }
        }
	</style>
	<body>
		<!--头部header开始-->
		<header class="flex flex-align-center">
			<div class="left flex flex-align-center" onclick="Util.jump('receivables.html')">
				<img src="img/arrleft.png" alt="" class="arrleft"/>
			</div>
			<div class="title">账单详情</div>
			<div class="right flex flex-pack-center flex-align-center">
				<!--<img  src="img/tel.png"/>-->
			</div>
		</header><!--头部header结束-->
		<div class="container" id="container">
			
		</div>
		<p style="font-size: 0.3rem;color: #4a91c7;margin: 0.5rem 0 0 2.65rem;" onclick="Util.jump('http://www.uniao.me/helpadmin/home/feedback.html')">对此订单有疑问</p>
		<script type="text/html" id="template_container">
			<div class="orderDetails border">
				<div class="state flex flex-align-center flex-pack-center border">
					<p><%= data.payStatusName %></p>
				</div>
				<div class="item flex flex-align-center">
					<p class="title flex-1">交易金额</p>
					<p class="details" style="color: #4a91c7;"><%= data.orderAmount %></p>
				</div>
				<div class="item flex flex-align-center">
					<p class="title flex-1">交易时间</p>
					<p class="details"><%= data.createTime %></p>
				</div>
				<div class="item flex flex-align-center">
					<p class="title flex-1">收款方式</p>
					<p class="details"><%= data.channelName %> <%= data.payModeName %> <%= data.tradeTypeName %></p>
				</div>
				<div class="item flex flex-align-center">
					<p class="title flex-1">交易单号</p>
					<p class="details"><%= data.orderNo %></p>
				</div>
				<div class="item flex flex-align-center">
					<p class="title flex-1">交易费率</p>
					<p class="details"><%= data.rate %>%</p>
				</div>
			</div>
			<div class="orderButtom">
				<p style="margin-top: 0.55rem;font-size: 0.34rem;color: #000;">实际到账</p>
				<p>￥<%= data.actualAmount %></p>
			</div>
		</script>
		<script type="text/html" id="template_container_loading">
			<div class="orderDetails border">
				<div class="state flex flex-align-center flex-pack-center border">
					<img src=""/>
					<p style="font-size: 0.28rem;">正在获取支付结果</p>
				</div>
				<div class="item flex flex-align-center">
					<p class="title flex-1">交易金额</p>
					<p class="details" style="color: #4a91c7;"><%= data.orderAmount %></p>
				</div>
				<div class="item flex flex-align-center">
					<p class="title flex-1">交易时间</p>
					<p class="details"><%= data.createTime %></p>
				</div>
				<div class="item flex flex-align-center">
					<p class="title flex-1">收款方式</p>
					<p class="details"><%= data.channelName %> <%= data.payModeName %> <%= data.tradeTypeName %></p>
				</div>
				<div class="item flex flex-align-center">
					<p class="title flex-1">交易单号</p>
					<p class="details"><%= data.orderNo %></p>
				</div>
				<div class="item flex flex-align-center">
					<p class="title flex-1">交易费率</p>
					<p class="details"><%= data.rate %>%</p>
				</div>
			</div>
			<div class="orderButtom">
				<p style="margin-top: 0.55rem;font-size: 0.34rem;color: #000;">实际到账</p>
				<p>￥<%= data.actualAmount %></p>
			</div>
		</script>
	</body>
	<script type="text/javascript" src="js/rem.js"></script>
	<script type="text/javascript" src="js/zepto.js"></script>
	<script type="text/javascript" src="js/template.js"></script>
	<script type="text/javascript" src="js/api.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript">
		var orderId = Util.GetQueryString('orderId');
	    function Getdetail(){
			Public.detail({
					id: orderId
			},function(res){
					res.data.actualAmount = (res.data.actualAmount/100).toFixed(2);
					res.data.orderAmount = (res.data.orderAmount/100).toFixed(2);
					if(res.data.payStatusCode == 0){
						html = template.render("template_container_loading", res);
						$("#container").html(html);
						meter=setTimeout("Getdetail()", 3000);
					}else{
						html = template.render("template_container", res);
						$("#container").html(html);
					}
				})
			}
     	Getdetail();
	</script>
</html>
